#include("/front/teacher/_layout.html")
#@layout()
#define layoutImportcss()
#end
#define layoutHead()
<title>课程详情</title>
#end
#define layoutHome()


<div class="page-content hide-navbar-on-scroll change-course-page-content">
	<div class="navbar">
		<div class="navbar-inner toolbstyle">
			<div class="left">
				<a id="a_btn_back" class="link external back" href="javascript:;">
					<i class="icon icon-back"></i>
				</a>
			</div>
			<div class="title">课程详情</div>
			<div class="right"></div>
		</div>
	</div>

	<!-- 托班课程 -->
	<div class="tuoban" style="padding: 0px;">
		<div class="tuoban-title1" style="">
			<img id="my-images" src="#" style="max-height: 200px; display: ;">
			<video id="my-video" controls="controls" autoplay="autoplay" src="#" style="display: none; width:100%; height: 200px;">您的浏览器不支持 video 标签。</video>
			<audio id="my-audio" controls="controls" autoplay="autoplay" src="#" style="display: none; width:100%; height: 200px;">您的浏览器不支持 audio 标签。</audio>
		</div>
		 <div class="list accordion-list" style="margin: 0;">
		  <ul>
			<li class="accordion-item">
			  <a href="#" class="item-link item-content">
				<div class="item-inner">
				  <div class="item-title" id="course_name"></div>
				</div>
			  </a>
			  <div class="accordion-item-content">
				<div class="block">
				  <p id="course_desc"></p>
				</div>
			  </div>
			</li>
		  </ul>
		</div>
		<div style="padding:10px 0 0 10px; font-size: 16px;">
			<B>课程目录</B>
		</div>
		<div class="kecmulu">
		</div>
	</div>
</div>
#end
#define layoutImportjs()
#end
#define layoutScript()
<script type="text/javascript">
	$$('#a_btn_back').on('click', function(){
		var plandate = getUrlParam('plandate');
		if (isBlank(plandate)){
			if (isBlank(document.referrer))
				window.location.href = '/front/teacher/html/teacher_helper';
			else
				window.history.back();
		}else{
			window.location.href = '/front/teacher/html/course?curdate='+plandate;
		}
		return false;
	});
	
	var course_id = getUrlParam("id");
	sendPost("/front/teacher/course/detaile?id=" + course_id, null, function(res) {
		console.log(res);
		bindHtml(res);
	});

	function bindHtml(res) {
		if (res.hasOwnProperty("course_rd")) {
			$$('#my-images').attr('src', getZoomFileUrlwh(res.course_rd.front_cover_url, 400,200));
			$$('#course_name').html(res.course_rd.course_name);
			$$('#course_desc').html(res.course_rd.course_desc);
		}
		var shtml = '';
		if (res.hasOwnProperty("list_courseclass")) {
			var rows1 = res.list_courseclass.filter(function(e) { return e.class_typeid == 1;});
			for (var i = 0; i < rows1.length; i++) {
				var jdata1 = rows1[i];
				shtml += '<div class="tuoban-course"><h2>' + jdata1.class_title + '</h2><div class="tuoban-list">';

				var rows2 = res.list_courseclass.filter(function(e) { return e.parent_id == rows1[i].class_id; });
				for (var j = 0; j < rows2.length; j++) {
					var jdata2 = rows2[j];
					
					if (jdata2.file_type == 1 || jdata2.file_type == 2) {
						shtml += '<a href="#" class="a_media" data-url="'+jdata2.file_url+'" file-type="'+jdata2.file_type+'">';
						shtml += '<i class="f7-icons">volume_fill</i>';
					} else {
						shtml += '<a href="'+jdata2.file_url+'" class="external" target="_blank">';
						shtml += '<i class="f7-icons">list_fill</i>';
					}
					
					shtml += '<span>' + jdata2.class_title + '</span></a>';
				}
				
				shtml += '</div></div>';
			}
		}
		$$('.kecmulu').html(shtml);
		bindMediaClick();
	}
	
	function bindMediaClick(){
		$$('a.a_media').on('click', function(){
			var ftype = $$(this).attr('file-type');
			var furl = $$(this).attr('data-url');
			$$('#my-images').hide(); 
			$$('#my-video').hide(); 
			document.getElementById("my-video").pause(); 
			$$('#my-audio').hide();
			document.getElementById("my-audio").pause();
			if (ftype == 1){
				$$('#my-video').attr('src', furl);
				$$('#my-video').show();
			}else if (ftype == 2){
				$$('#my-audio').attr('src', furl);
				$$('#my-audio').show();
			}else{
				$$('#my-images').show();
			}
		});
	}
</script>
#end
